import { Outlet } from 'react-router-dom';
import { motion } from 'framer-motion';

function App() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-[#f2f8ff] to-[#e6eeff] relative overflow-hidden">
      {/* 装饰性背景光效 */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute w-[500px] h-[500px] -top-48 -left-24 bg-[#6fb0ff] rounded-full mix-blend-multiply filter blur-[128px] opacity-20 animate-pulse"></div>
        <div className="absolute w-[500px] h-[500px] -bottom-48 -right-24 bg-[#327dff] rounded-full mix-blend-multiply filter blur-[128px] opacity-20 animate-pulse"></div>
        
        {/* Radial gradient overlay */}
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_rgba(255,255,255,0.2),transparent)]"></div>
      </div>
      
      {/* 主要内容 */}
      <div className="relative z-10">
        <motion.header 
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, ease: "easeOut" }}
          className="bg-white/20 backdrop-blur-xl border-b border-white/10 shadow-[0_4px_30px_rgba(0,0,0,0.1)]"
        >
          <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
            <h1 className="text-3xl font-light text-gray-800 tracking-wide">
              卡系统交易测试平台
            </h1>
          </div>
        </motion.header>
        <main>
          <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
            <Outlet />
          </div>
        </main>
      </div>
    </div>
  );
}

export default App;
